import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import postcsspxtoviewport from 'postcss-px-to-viewport'
import svgr from "vite-plugin-svgr";
import { qrcode } from 'vite-plugin-qrcode';


// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), svgr(),qrcode()],
  resolve: {
    // extensions: [".js", ".jsx", ".json", ".ts", "tsx"],
    alias: {
      "@": "/src",
    }
  },
  css: {
    postcss: {
      plugins: [
        postcsspxtoviewport({
          unitToConvert: "px",//要转化的单位
          viewportWidth: 750, //ui设计原稿的宽度
          unitPrecision: 5,//转化后的精度，也就是小数点位数
          propList: ["*"],//指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw",//指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw",//指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ['ignore-'],//指定不转换位数床单位的类名 黑名单
          minPixelValue: 1, //默认为1，小于或者等于1px则不进行转换
          mediaQuery: false,//是否在媒体查询的css代码中也进行转化，默认为alse
          replace: true,//是否转化后直接更换属性值
          exclude: [/node_modules/],//设置忽略文件，用正则做目录名匹配
          landscape: false,//是否处理横屏情况
        })
      ]
    },
    modules: {
      localsConvention: "camelCase",//使用驼峰命名，
      scopeBehaviour: "local",//模块化行为
      generateScopedName: "[name]__[local]___[hash:base64:5]",//生成类名规则
    },
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,//支持内联javascript
      }
    }
  }
})
